當專案越來越大，開發越來越複雜時，測試就是一項保險機制。

在 Gamilms 的前端測試用的框架，這裡選用 Jest

新建專案時選擇單元測試

選擇 jest

分隔各組件設定

對於前端工程師來說，確保資料與頁面的連接，是經常需要處理的事務，
過程中的邏輯，就是最需要被測試的部分，
將這些邏輯獨立出來，以利測試與引用，
在 src 下建立 domains 來存放，

因為有分隔組件設定，為了只測試 domains 下的邏輯，
需要調整根目錄下的 jest.config.js，
將 moduleNameMapper 調整成 domains 的路徑。

// jest.config.js
module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
      "jest-transform-stub",
    "^.+\\.jsx?$": "babel-jest"
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/domains/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ],
  testURL: "http://localhost/"
};

建立一個簡單的範例

// sum.js
function sum(a, b) {
    return a + b;
}

module.exports = sum;

在 \tests\unit 資料夾中建立測試檔案

// sum.spec.js
import sum from "@/sum.js";

describe("sum.js", () => {
  it('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

在專案目錄執行測試

於是完成了一個簡單的 Jest 單元測試。